.modal
  display: flex
  top: 0
  left: 0
  position: fixed
  justify-content: center
  align-items: center
  width: 100vw
  height: 100vh
  z-index: 9999

  .modal-mask
    position: fixed
    z-index: 1
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: rgba(0, 0, 0, .5)
    transition: opacity 5s ease

  .modal-container
    position: relative
    z-index: 2
    max-height: 70vh
    max-width: 70vw
    overflow: scroll
    min-width: 300px
    margin: 0px auto
    padding: 20px 30px
    background-color: #fff
    border-radius: 2px
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33)
    transition: all .3s ease
    font-family: Helvetica, Arial, sans-serif


  .modal-header h3
    margin-top: 0
    color: #42b983


  .modal-body
    margin: 20px 0


.modal-enter
  opacity: 0

  .modal-container
    transform: scale(1.1)


.modal-leave-active
  opacity: 0

  .modal-container
    transform: scale(1.1)



